import React, { useState } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import SideMenu from '@/components/sandbox/SideMenu.js'
import TopHeader from '@/components/sandbox/TopHeader.js'
import Home from './home/Home.js'
import Clue from '@/views/clue/Clue.js'
import Opportunity from '@/views/opportunity/Opportunity.js'
import ServiceMonitorIng from '@/views/servicemonitoring/ServiceMonitorIng.js'
import CacheMonitorIng from '@/views/cachemonitoring/CacheMonitorIng.js'
import Error from './404/Error404.js'
import './SandBox.css'
// 引入antd
import { Layout } from 'antd';
const { Content } = Layout;

export default function SandBox() {
  const [collapsed, setCollapsed] = useState(false)
  const changeCollapsed = (value) => {
    setCollapsed(value)
  }

  return (
    <div>
      <Layout>
        <SideMenu collapsed='collapsed'></SideMenu>
        <Layout className="site-layout">
          <TopHeader changeCollapsed={changeCollapsed}></TopHeader>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >
            <Switch>
              <Route path='/home' component={Home} />
              {/* 重定向到首页 */}
              <Redirect from="/" to="/home" exact></Redirect>
              <Route path='/clue' component={Clue}></Route>
              <Route path='/opportunity' component={Opportunity}></Route>
              <Route path='/monitor/server' component={ServiceMonitorIng}></Route>
              <Route path='/monitor/cache' component={CacheMonitorIng}></Route>
              <Route path='*' component={Error}></Route>
            </Switch>
          </Content>
        </Layout>
      </Layout>
    </div>
  )
}
